<style>
    ._transfer-navbar{ padding: 0 5px 10px; }
    ._transfer-navbar .cell{ display: inline-block; float: left; width: 25%; }
    ._transfer-navbar .cell span{ display: block; margin: 10px 5px 0; height: 36px; line-height: 36px; text-align: center; color: #cfd0d1; border: 1px solid #cfd0d1; border-radius: 3px; }
    ._transfer-navbar .current span{color: #d50000; border-color: #d50000; }
</style>

<template>
  <div class="wrapper">
    <div class="header">
      <mt-header title="账户资金互转">
        <router-link to="/user" slot="left">
          <mt-button icon="back">我的</mt-button>
        </router-link>
      </mt-header>
    </div>

    <div class="_transfer-navbar">
        <div class="cell" :class="{'current':selected == 1}" @click="selected = 1;account = '';enableAmount = $store.state.userInfo.enableAmt"><span>融资→指数</span></div>
        <div class="cell" :class="{'current':selected == 2}" @click="selected = 2;account = '';enableAmount = $store.state.userInfo.enableIndexAmt"><span>指数→融资</span></div>
        <div class="cell" :class="{'current':selected == 3}" @click="selected = 3;account = '';enableAmount = $store.state.userInfo.enableAmt"><span>融资→期货</span></div>
        <div class="cell" :class="{'current':selected == 4}" @click="selected = 4;account = '';enableAmount = $store.state.userInfo.enableFuturesAmt"><span>期货→融资</span></div>
        <div class="cell" :class="{'current':selected == 5}" @click="selected = 5;account = '';enableAmount = $store.state.userInfo.enableAmt"><span>融资→港资</span></div>
        <div class="cell" :class="{'current':selected == 6}" @click="selected = 6;account = '';enableAmount = $store.state.userInfo.enableHkAmt"><span>港资→融资</span></div>
        <div class="cell" :class="{'current':selected == 7}" @click="selected = 7;account = '';enableAmount = $store.state.userInfo.enableAmt"><span>融资→美资</span></div>
        <div class="cell" :class="{'current':selected == 8}" @click="selected = 8;account = '';enableAmount = $store.state.userInfo.enableUsAmt"><span>美资→融资</span></div>
        <div class="cell" :class="{'current':selected == 9}" @click="selected = 9;account = '';enableAmount = $store.state.userInfo.enableHkAmt"><span>港资→美资</span></div>
        <div class="cell" :class="{'current':selected == 10}" @click="selected = 10;account = '';enableAmount = $store.state.userInfo.enableUsAmt"><span>美资→港资</span></div>
        <div style="clear: both; height: 0; font-size: 0; overflow: hidden;"></div>
    </div>

    <div class="order-list">
      <div>
        <div class="form-block">
          <mt-field label="可转金额" type="text" disabled v-model="enableAmount"></mt-field>
        </div>
        <div class="form-block">
          <mt-field label="转账金额" v-model="form.account" placeholder="请输入转账金额" type="text">
            <span @click="form.account = enableAmount">全部</span>
          </mt-field>
        </div>
        <div class="btnbox">
          <span class="text-center btnok loginout" @click="tosubmit">确认</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import foot from '@/components/foot/foot'
// import '@/assets/style/common.less'
import * as api from '@/axios/api'
import { Toast } from 'mint-ui'

export default {
  components: {
    foot
  },
  data () {
    return {
      selected: '1', // 选中
      enableAmount:0,
      form: {
        account: '',
        password: ''
      },
      userInfo: {
        realName: ''
      }
    }
  },
  watch: {},
  computed: {},
  created () {
    this.getProductSetting()
  },
  mounted () {
    if (this.$route.query.type) {
      this.selected = this.$route.query.type + ''
    }
    this.getUserInfo()
  },
  methods: {
    async getProductSetting () {
      let data = await api.getProductSetting()
      if (data.status === 0) {
        this.$store.state.settingForm = data.data
        if (!this.$store.state.settingForm.indexDisplay) {
          this.selected = '3'
        }
      } else {
        this.$message.error(data.msg)
      }
    },
    async tosubmit () {
      // 融资转指数
      let opt = {
        amt: this.form.account,
        type: this.selected // 1 融资转指数 2 指数转融资
      }
      let data = await api.AmtChange(opt)
      if (data.status === 0) {
        Toast(data.msg)
        this.$router.push('/user')
      } else {
        Toast(data.msg)
      }
    },
    async getUserInfo () {
      // 获取用户信息
      let data = await api.getUserInfo()
      if (data.status === 0) {
          this.enableAmount = data.data.enableAmt
        this.$store.state.userInfo = data.data
      } else {
        Toast(data.msg)
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .is-selected .mint-tab-item-label:hover {
    text-decoration: none;
  }

  .wrapper /deep/ .mint-tab-item-label {
    font-size: 0.264rem;
  }

  .mint-navbar .mint-tab-item.is-selected {
    // color: #d50000;
    // border-bottom: 2px solid #d50000;
    text-decoration: none;
    margin-bottom: 0;
  }

  .prompt {
    padding: 0.3rem 0 0.2rem 0.7rem;
  }
</style>
